<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>-->
<style type="text/css">
textarea{width:600px;min-width:600px;max-width:100%;border:solid #999;border-width:20px 4px 4px 4px;border-radius:6px;padding:15px 5px 5px 12px;background:#666 url(https://lh4.googleusercontent.com/-poMDGJSQP88/UEbw90-a8dI/AAAAAAAAAZM/AVNs6vOFod0/h120/th-ori-textarea-resize18.png) bottom right no-repeat;color:#fff;}
textarea:focus{background:#eee;color:#000;}
input{margin-left:10px;padding:0 8px;}
.clik{cursor:pointer !important;}
.cssValue{width:80px;max-width:200px;}
fieldset{border-radius:8px;box-shadow:0 0 4px #000;min-width:600px;display:inline-block;border:solid #555;border-width:25px 2px 2px 2px;}
</style>

</head>

<body>
<!--
dir="ltr" style="text-align: left;" trbidi="on"
-->
<div  style="margin:20px auto;text-align:center;">
<fieldset>
<span style="color:lightblue;display:block;text-align:center;font:bold 18px Verdana;margin:-30px 100px 5px;">CSS Input - Paste CSS on Box</span>
<form name="gombal1">
<input class="clik" onclick="javascript:this.form.area_1.focus();this.form.area_1.select();" value="Select All" type="button"/><input class="clik" onclick="javascript:this.form.area_1.value='';" value="Clear" type="button"/> &nbsp;&nbsp;<button class="clik" accesskey="c" onclick="javascript:runCompression();" type="button" value="Compress"><b style="color:red;margin:0 20px;">Compress</b></button><span style="margin-left:30px;">Input Size:</span><input class="cssValue" id="sizeInput" readonly="readonly" type="text" /><br />
<textarea name="area_1" class="wide" cols="75" id="fileInput" onkeyup="javascript:compressCSS();" rows="10"></textarea></form><br/>
<b>Compression Options:</b>
  <label>
    <input checked="checked" id="commentsCSS" type="checkbox" />No Comments
  </label><!--
  <label>
    <input checked="checked" id="strip_long_comments" type="checkbox" /> Strip comments at least    <input id="long_comments_length" size="2" type="text" value="4" /> characters long
  </label><br />-->
  <label>
    <input checked="checked" id="perSyntax" type="checkbox" />Hight/Highest
  </label>
</fieldset>
<br /><br />
<fieldset><span style="color:lightblue;display:block;text-align:center;font:bold 18px Verdana;margin:-30px 100px 5px;">Compressed CSS</span>
<form name="gombal2">
<input class="clik" type="button" onclick="javascript:this.form.area_2.focus();this.form.area_2.select();" value="Select All"/><span style="margin-left:30px;">Output Size</span> : <input class="cssValue" id="sizeOutput" readonly="readonly" />
<span style="margin-left:30px;">Compression ratio: </span><input class="cssValue" id="compressValue" readonly="readonly" /><br />
<textarea name="area_2" class="wide" cols="75" id="fileOutput" readonly="readonly" rows="10"></textarea>
</form><br />
</fieldset>
<script type="text/javascript">
function compressCSS() {
	var code=document.getElementById('fileInput').value;
	var box=document.getElementById('sizeInput');
	box.value=code.length;
}

function runCompression() {
	compressCSS();
	var code=document.getElementById('fileInput').value;

	var commentRegex='';
	//strip comments ?
	if (document.getElementById("commentsCSS").checked) {
		commentRegex='\\/\\*.*?\\*\\/';
	}

	/*strip long comments ?
	if (document.getElementById("strip_long_comments").checked) {
		commentRegex='\\/\\*.{'+document.getElementById("long_comments_length").value+',}?\\*\\/';
	}*/

	//strip comments
	if (''!=commentRegex) {
		commentRegex=new RegExp(commentRegex ,'g');
		code=code.replace(commentRegex, '');
	}
	
	//strip newlines
	code=code.replace(/\n*/g, '');

	code=code.replace(/[	 ]+/g, ' ');           //[  ] = tab and space, replace all tabs and spaces with one space
	code=code.replace(/\s?([;:{},+>])\s?/g, '$1'); //no need for space around these characters
//	code=code.replace(/;}/g, '}');                 //don't need semicolon for the last statement in a rule

	//add newlines
	if (document.getElementById("perSyntax").checked) {
		code=code.replace(/}/g, "}\n");
	}

	document.getElementById('sizeOutput').value=code.length;
	var codeOutBox=document.getElementById('fileOutput');
	codeOutBox.value=code;

	var compressionRatio=code.length/document.getElementById('sizeInput').value*100;
	compressionRatio=100-compressionRatio;
	compressionRatio=Math.round(compressionRatio*100)/100;
	document.getElementById('compressValue').value=compressionRatio+'%';
}

</script>
</div>
<div style='clear: both;'></div>



</body>
</html>
